<template>
  <view class="article">
    <view class="container">
      <view class="header">
        <view>{{ vuex_article.title }}</view>
        <view> 更新于{{ date }}</view>
      </view>
      <img :src="vuex_article.img" class="img" />
      <jyf-parser
        :html="vuex_article.content"
        ref="article"
        selectable
        lazy-load
        show-with-animation
        :tag-style="tagStyle"
        >加载中..</jyf-parser
      >
    </view>
  </view>
</template>

<script>
import jyfParser from "@/plugins/jyf-parser/jyf-parser";
export default {
  components: {
    jyfParser,
  },
  data() {
    return {
      content: "",
      date: "",
      tagStyle: {
        img:
          "border-radius:20rpx;margin:10rpx 0;text-indent: none;line-height:35rpx;",
        p: "color:#333333;display: block;",
      },
    };
  },
  methods: {},

  onReady() {
    console.log(this.vuex_article);
    var date = new Date(this.vuex_article.created_at * 1000);
    var Y = date.getFullYear() + "-";
    var M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var D = date.getDate() + " ";
    // var h = date.getHours() + ":";
    // var m = date.getMinutes() + ":";
    // var s = date.getSeconds();

    this.date = Y + M + D;
  },
};
</script>

<style scoped lang ='scss' >
.article {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
  .container {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 20rpx;
    .header {
      border-bottom: 1rpx solid #e6e6e6;
      padding-bottom: 20rpx;
      margin-bottom: 20rpx;

      & > view:nth-child(1) {
        font-size: 36rpx;
        color: #000000;
        font-weight: Bold;
        margin: 10rpx;
      }
      & > view:nth-child(2) {
        font-size: 22rpx;
        color: #666666;
        margin: 10rpx;
      }
    }
    .img {
      width: 100%;
      max-height: 177 * 2rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>
